<!--
    * Time    : 2021-03-16 09:33:16
    * Author  : zhangTj
    * Desc    : 进度条
-->
<template>
    <div class="w-100 rounded-6 position-relative" style="background: transparent" :style="{ height: `${height}px` }">
        <div class="rounded-6 transition-all05" :style="{ background: color, height: `${height}px`, width: `${progress}%` }">
            <span v-if="showText" class="text-999 font-12 transition-all05 position-absolute" style="top: -2px" :style="{ left: `${progress + 2}%` }">
                {{ percentage }}%
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Process',
    props: {
        // 颜色
        color: {
            type: String,
            default: '#4eae31'
        },

        // 高度
        height: {
            type: Number,
            default: 12
        },

        // 进度 1-100之间
        percentage: {
            type: Number | String,
            required: true,
            validator(value) {
                if (Number(value) < 0) {
                    return false
                }
                if (Number(value) > 100) {
                    return false
                }
                return true
            }
        },

        // 是否显示进度文本
        showText: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        // 文字的位置和进度条的宽度 - 对0进行处理(即使为0时，也会显示一点点进度)
        progress() {
            return Number(this.percentage) == 0 ? 5 : Number(this.percentage)
        }
    },
    data() {
        return {}
    }
}
</script>
